<template>
  <div class="">
    <!-- <coma></coma>
    <comb></comb> -->
    <button></button>
    <component :is="com"></component>
    <!-- 动态组件的is可以指定在这个component里面加载哪个组件 -->
    <h5>{{ $store.getters.res }}</h5>
    <h5>{{ $store.state.moduleA.msga }}</h5>

    <my-add msg="add" @click="adds" v-model="title"></my-add>
    <ul>
      <li v-for="item in list">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import coma from "@/components/a.vue";
import comb from "@/components/b.vue";
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      title: "111",
      com: "comb",
    };
  },
  mounted() {
    // this.$store.dispatch("getlist");
    this.getlist();
  },
  computed: {
    ...mapState(["list"]),
    // state和getter展开在计算属性里
  },
  methods: {
    // add() {
    //   this.$store.commit("add", this.title);
    // },
    adds() {
      this.add(this.title);
    },
    ...mapMutations(["add"]),
    ...mapActions(["getlist"]),
    //展开mutation和action 展开在methods底下
  },
  components: {
    coma,
    comb,
  },
};
</script>

<style lang="scss"></style>
